<template>
  <div class="home-wrapper">
    <Row type="flex" justify="center">
      <Col :span="24">
        <div class="home-title">
          <h1>TPSHION CLOUD</h1>
          <p class="title-note">一个更易于构建SpringCloud微服务应用、配置管理和服务管理平台。</p>
          <Tag color="primary">版本：v1.1.10</Tag>
          <Tag color="primary" @click.native="handleTagClick" :style="{cursor: 'pointer'}">项目预览</Tag>
        </div>
      </Col>
      <Col :span="24">
        <div class="home-note">
          <Divider>项目使用框架技术</Divider>
          <Row :gutter="16">
            <Col :xs="24" :sm="24" :md="8" :lg="8">
              <Card class="note-card">
                <div class="note-title">
                  <img src="../assets/spring-logo.svg"/>
                </div>
                <div class="note-content">
                  <p>Spring Cloud Gateway实现微服务网关，Ribbon实现负载均衡，Feign实现服务调用。</p>
                </div>
              </Card>
            </Col>
            <Col :xs="24" :sm="24" :md="8" :lg="8">
              <Card class="note-card">
                <div class="note-title">
                  <img src="../assets/nacos-logo.png"/>
                </div>
                <div class="note-content">
                  <p>Nacos 提供了一组简单易用的特性集，帮助快速实现动态服务发现、服务配置、服务管理。</p>
                </div>
              </Card>
            </Col>
            <Col :xs="24" :sm="24" :md="8" :lg="8">
              <Card class="note-card">
                <div class="note-title">
                  <img src="../assets/iview-logo.png"/>
                </div>
                <div class="note-content">
                  <p>前端框架使用View UI，一套基于 Vue.js 的高质量UI 组件库。主要服务于 PC 界面的中后台产品。</p>
                </div>
              </Card>
            </Col>
            <Col :xs="24" :sm="24" :md="8" :lg="8">
              <Card class="note-card">
                <div class="note-title">
                  <img src="../assets/redis-logo.png"/>
                </div>
                <div class="note-content">
                  <p>Redis作为分布式缓存，实现高性能数据读取。结合Redis实现轻量级分布式定时任务，易扩展。</p>
                </div>
              </Card>
            </Col>
            <Col :xs="24" :sm="24" :md="8" :lg="8">
              <Card class="note-card">
                <div class="note-title">
                  <img src="../assets/mysql-logo.jpeg"/>
                </div>
                <div class="note-content">
                  <p>MySQL做为主要数据库。Mybatis + Mybatis-Plus作为持久层框架，读写性能好，更适合SQL的优化。</p>
                </div>
              </Card>
            </Col>
            <Col :xs="24" :sm="24" :md="8" :lg="8">
              <Card class="note-card">
                <div class="note-title">
                  <img src="../assets/minio-logo.png"/>
                </div>
                <div class="note-content">
                  <p>MinIO 是一个开源协议的对象存储服务，非常适合于存储大容量非结构化的数据。</p>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </Col>
      <Col :span="24">
        <div class="home-note">
          <Divider>系统功能</Divider>
          <Row :gutter="16">
            <Col :span="24">
              <Card class="home-sys">
                <img src="../assets/config.png"/>
                <p>配置中心</p>
              </Card>
            </Col>
            <Col :span="24">
              <Card class="home-sys">
                <img src="../assets/discovery.png"/>
                <p>注册中心</p>
              </Card>
            </Col>
            <Col :span="24">
              <Card class="home-sys">
                <img src="../assets/file.png"/>
                <p>文件服务</p>
              </Card>
            </Col>
            <Col :span="24">
              <Card class="home-sys">
                <img src="../assets/menu.png"/>
                <p>菜单管理</p>
              </Card>
            </Col>
            <Col :span="24">
              <Card class="home-sys">
                <img src="../assets/monitor.png"/>
                <p>性能监控</p>
              </Card>
            </Col>
            <Col :span="24">
              <Card class="home-sys">
                <img src="../assets/log.png"/>
                <p>日志查看</p>
              </Card>
            </Col>
          </Row>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {

    }
  },
  methods:{
    handleTagClick(){
      window.open('https://tpshion.cn/admin')
    }
  }
}
</script>

<style lang="less" scoped>
.home-wrapper{
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px;
  .home-title{
    text-align: center;
    padding: 50px 0px;
    background-color: black;
    color: #fff;
    .title-note{
      padding: 20px;
    }
  }
  .home-note{
    text-align: center;
    margin: 49px auto;
    .note-card{
      height: 190px;
      margin-top: 10px;
      margin-bottom: 10px;
      .note-title{
        text-align: center;
        width: 200px;
        height: 85px;
        margin:0 auto;
        padding-top: 20px;
        img {
          max-width: 100%;
          max-height: 100%;
          display: block;
          margin: auto;
        }
      }
    }
    .home-sys{
      text-align: center;
      margin: 30px auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

<style scoped>
.home-sys >>> .ivu-card-body{
  padding: 2px;
}
</style>
